<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
    <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        
        <title>Diverso | Just another YIW Themes Demo Sites site</title>
        
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 960px)" href="css/lessthen800.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="css/lessthen600.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="css/lessthen480.css" />
                                   
        <!-- CUSTOM STYLE -->                                                                        
        <link rel="stylesheet" type="text/css" media="all" href="css/custom-style.css" />
        
        <!-- [favicon] begin -->
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <!-- [favicon] end -->  
        
        <!-- MAIN FONT STYLE -->  
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz%3A400&amp;subset=latin%2Ccyrillic%2Cgreek" type="text/css" media="all" />      
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans" type="text/css" media="all" />    
	    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald" type="text/css" media="all" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz%3A200%2C400" type="text/css" media="all" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed%3A300%7CPlayfair+Display%3A400italic" type="text/css" media="all" />
        <!-- END MAIN FONT STYLE -->  
        
        <link rel="stylesheet" id="prettyPhoto-css" href="css/prettyPhoto.css" type="text/css" media="all" />
        <link rel="stylesheet" id="jquery-tipsy-css" href="css/tipsy.css" type="text/css" media="all" />
        
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/jquery.tipsy.js"></script>
        <script type="text/javascript" src="js/jquery.tweetable.js"></script>        
        <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>  
        <script type="text/javascript" src="js/jquery.flexslider.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.min.js"></script>  
        
        <!-- for accordion slider in staff page -->
        <script type="text/javascript" src="js/jquery.hrzAccordion.js"></script>  
        
        <!-- for filterable effect in gallery and portfolio filterable page -->
        <script type="text/javascript" src="js/jquery.quicksand.js"></script>  
        
        <!-- for portfolio slider -->
        <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script> 
        
        <!-- for the contact page -->
        <script type="text/javascript" src="js/contact.js"></script>  
        
        <!-- SLIDER ELASTIC -->                                                               
        <link rel="stylesheet" id="slider-elastic-css" href="css/slider-elastic.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        
        <!-- SLIDER CYCLE -->                                                               
        <link rel="stylesheet" id="slider-cycle-css" href="css/slider-cycle.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.slides.min.js"></script>
        
        <!-- SLIDER THUMBNAILS -->                                                               
        <link rel="stylesheet" id="slider-thumbnails-css" href="css/slider-thumbnails.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
        
        <!-- SLIDER FLASH -->                                                               
        <script type="text/javascript" src="js/swfobject.js"></script>      
        
        <!-- SLIDER ELEGANT -->                                                               
        <link rel="stylesheet" id="slider-elegant-css" href="css/slider-elegant.css" type="text/css" media="all" />
        
        <!-- SLIDER NIVO -->                                                               
        <link rel="stylesheet" id="slider-nivo-css" href="css/slider-nivo.css" type="text/css" media="all" />     
        
        <!-- CUSTOM JAVASCRIPT -->                           
        <script type="text/javascript" src="js/jquery.custom.js"></script>
    </head>
    
    <body class="home image-sphere-style responsive">
    
        <!-- START SHADOW WRAPPER -->
        <div class="shadowBg group">
            
            <!-- START WRAPPER -->
            <div class="wrapper group">
                
                <!-- START TOPBAR -->
                <div id="topbar">
                    <div class="inner">
                        <ul class="topbar_links">
                            <li>
                                <a href="#">Login</a>  
                            </li>
                            <li> | <a href="contact.html">Contact Us</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <!-- end.inner -->
                </div>
                <!-- END TOPBAR -->   
                 
                <!-- START HEADER -->
                <div id="header" class="group">
                
                    <!-- START LOGO -->
                    <div id="logo" class="group">
                        <a href="index.html" title="Diverso"> 
                        <img src="images/logo.png" alt="Logo Diverso" />
                        </a>              
                    </div>
                    <!-- END LOGO -->   
                    
                    <!-- START NAV -->
                    <div id="nav" class="group">
                        <ul class="level-1 white">
                            <li class="home">
                                <a href="index.html">HOME</a>
                                <ul class="sub-menu">
                                    <li><a href="home-version-2.html">HOME VERSION 2</a></li>
                                    <li><a href="home-version-3.html">HOME VERSION 3</a></li>
                                    <li><a href="home-version-4.html">HOME VERSION 4</a></li>
                                    <li><a href="home-version-5.html">HOME VERSION 5</a></li>
                                    <li><a href="home-version-6.html">HOME VERSION 6</a></li>
                                </ul>
                            </li>
                            <li class="folder">
                                <a href="#">Pages</a>
                                <ul class="sub-menu">
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="testimonials.html">Testimonials</a></li>
                                    <li><a href="staff.html">Staff</a></li>
                                    <li><a href="gallery.html">Gallery</a></li>
                                    <li><a href="archives.html">Archives</a></li>
                                </ul>
                            </li>
                            <li class="bookmark">
                                <a href="#">Portfolio</a>
                                <ul class="sub-menu">
                                    <li><a href="portfolio-3-columns.html">3 Columns</a></li>
                                    <li><a href="portfolio-with-slider.html">With Slider</a></li>
                                    <li><a href="portfolio-big-image.html">Big Image</a></li>
                                    <li><a href="portfolio-full-description.html">Full Description</a></li>
                                    <li><a href="portfolio-filterable.html">Filterable</a></li>
                                </ul>
                            </li>
                            <li class="burst">
                                <a href="#">Shortcodes</a>
                                <ul class="sub-menu">
                                    <li><a href="shortcode-nivo-slider.html">Nivo Slider</a></li>
                                    <li><a href="shortcode-media-widgets.html">Media &#038; Widgets</a></li>
                                    <li><a href="shortcode-alert-box-buttons.html">Alert box &#038; buttons</a></li>
                                    <li><a href="shortcode-icon-sections.html">Icon Sections</a></li>
                                    <li><a href="shortcode-table-box-prices.html">Table &#038; Box prices</a></li>
                                    <li><a href="shortcode-typography.html">Typography</a></li>
                                    <li><a href="shortcode-mix-various.html">Mix &#038; Various</a></li>
                                </ul>
                            </li>
                            <li class="calendar">
                                <a href="blog.html">Blog</a>
                                <ul class="sub-menu">
                                    <li><a href="blog-small-image.html">Small Image</a></li>
                                    <li><a href="blog-big-image.html">Big image</a></li>
                                </ul>
                            </li>
                            <li class="email"><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    <!-- END NAV -->   
                </div>
                <!-- END HEADER -->        
        
                <!-- START SLIDER -->
                <div id="slider" class="elegant group inner">
                    <ul class="group">
                        <li class="first slide-1 group image-content-type">
                            <div class="slider-featured group"><img src="images/slider/elegant/001.jpg" width="960" height="338" alt="interior design" /></div>
                            <div class="slider-caption caption-right">
                                <div class="text">
                                    <!-- TITLE -->
                                    <h2>interior design</h2>
                                    <!-- TEXT -->
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar turpis velit. Morbi rutrum, neque non pulvinar faucibus, ligula eros viverra ligula, et aliquam libero neque ac nisl. </p>
                                    <p><span class="special-font" style="font-size:24px;">prices from <span style="font-size:42px;">$45</span></span></p>
                                </div>
                            </div>
                        </li>
                        <li class="slide-2 group image-content-type">
                            <div class="slider-featured group"><img src="images/slider/elegant/002.jpg" width="960" height="338" alt="Luxury gold" /></div>
                            <div class="slider-caption caption-right">
                                <div class="text">
                                    <!-- TITLE -->
                                    <h2>Luxury gold</h2>
                                    <!-- TEXT -->
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar turpis velit. Morbi rutrum, neque non pulvinar faucibus, ligula eros viverra ligula, et aliquam libero neque ac nisl. </p>
                                </div>
                            </div>
                        </li>
                        <li class="slide-3 group image-content-type">
                            <div class="slider-featured group"><img src="images/slider/elegant/003.jpg" width="960" height="338" alt="Beauty SPA" /></div>
                            <div class="slider-caption caption-right">
                                <div class="text">
                                    <!-- TITLE -->
                                    <h2>Beauty SPA</h2>
                                    <!-- TEXT -->
                                    <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum</p>
                                    <p><span class="special-font" style="font-size:24px;">prices from <span style="font-size:42px;">$37</span></span></p>
                                </div>
                            </div>
                        </li>
                        <li class="last slide-4 group image-content-type">
                            <div class="slider-featured group"><img src="images/slider/elegant/004.jpg" width="960" height="338" alt="Healthy Food" /></div>
                            <div class="slider-caption caption-right">
                                <div class="text">
                                    <!-- TITLE -->
                                    <h2>Healthy Food</h2>
                                    <!-- TEXT -->
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar turpis velit. Morbi rutrum, neque non pulvinar faucibus, ligula eros viverra ligula, et aliquam libero neque ac nisl. </p>
                                    <p><span class="special-font" style="font-size:24px;">prices from <span style="font-size:42px;">$18</span></span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>                       
                
                <!-- JS SCRIPT --> 
                <script type="text/javascript">  
                    // edit here
                    var 	slider_elegant_easing = null,
            				slider_elegant_fx = 'fade',
            				slider_elegant_speed = 500,
            				slider_elegant_timeout = 5000,
            				slider_elegant_caption_speed = 500; 
                    // end editing    
                            
            		$("#slider ul").cycle({                                                    
            			easing 	: slider_elegant_easing,
            	    	fx 		: slider_elegant_fx,
            			speed 	: slider_elegant_speed,
            			timeout : slider_elegant_timeout,
            			before	: function(currSlideElement, nextSlideElement, options, forwardFlag) {
            				var width = parseInt( $('.slider-caption', currSlideElement).outerWidth() );
            				var height = parseInt( $('.slider-caption', currSlideElement).outerHeight() );
            				
            				$('.caption-top', currSlideElement).animate({top:height*-1}, slider_elegant_caption_speed);
            				$('.caption-bottom', currSlideElement).animate({bottom:height*-1}, slider_elegant_caption_speed);
            				$('.caption-left', currSlideElement).animate({left:width*-1}, slider_elegant_caption_speed);
            				$('.caption-right', currSlideElement).animate({right:width*-1}, slider_elegant_caption_speed);
            			},
            			after	: function(currSlideElement, nextSlideElement, options, forwardFlag) {
            				$('.caption-top', nextSlideElement).animate({top:0}, slider_elegant_caption_speed);
            				$('.caption-bottom', nextSlideElement).animate({bottom:0}, slider_elegant_caption_speed);
            				$('.caption-left', nextSlideElement).animate({left:0}, slider_elegant_caption_speed);
            				$('.caption-right', nextSlideElement).animate({right:0}, slider_elegant_caption_speed);
            			}
            	    });   
                </script>
                <!-- END #slider -->    
                 
                <div id="content" class="gradient layout-sidebar-no group">
                    
                    <!-- START SLOGAN -->
                    <div id="slogan" class="inner">
                        <h1>DI'VERSO <span>IS A CREATIVE AGENCY.</span></h1>
                        <h3>We create a beautiful, original, <span>amazing things.</span></h3>
                    </div>    
                    <!-- END SLOGAN -->
                    
                    <!-- START CONTENT -->
                    <div id="primary" class="hentry group wrapper-content" role="main">
                    
                        <div class="one-fourth">
                            <h3>Interior design</h3>
                            <p><img class="alignleft" title="001" src="images/various/00112.jpg" alt="" width="220" height="81" /></a></p>
                            <p>Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.</p>
                        </div>
                        
                        <div class="one-fourth">
                            <h3>Nice accessories</h3>
                            <p><img class="alignleft" title="002" src="images/various/0024.jpg" alt="" width="220" height="81" /></a></p>
                            <p>Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.</p>
                        </div>
                        
                        <div class="one-fourth">
                            <h3>Love this theme?</h3>
                            <p><img class="alignleft" title="003" src="images/various/0036.jpg" alt="" width="220" height="81" /></a></p>
                            <p>Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.</p>
                        </div>
                        
                        <div class="one-fourth last">
                            <h3>Buy it on ThemeForest</h3>
                            <p><img class="alignleft" title="04" src="images/various/04.jpg" alt="" width="220" height="81" /></p>
                            <p>Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.</p>
                        </div>
                        
                    </div>
                    <!-- END CONTENT -->
                    
                </div>
                <!-- END CONTENT -->
        

                <!-- START TWITTER -->
                <div id="twitter-slider" class="group">
                    <div class="tweets-list"></div>
                    <div class="bird"></div>
                </div>
                <!-- END TWITTER -->   
                
                <!-- START FOOTER -->
                <div id="footer" class="group columns-4"><!-- here you can change the number of columns -->
                    <div class="inner footer-main">
                        
                        <!-- START WIDGET -->
                        <div class="widget-first widget widget_text">
                            <h3>COMPANY</h3>
                            <p>
                                Di'verso is a new WordPress all in one, clean & modern In in 
                                odio ut lectus posuere consequat in nec ipsum. Proin pretium 
                                ullamcorper lectus non feugiat. 
                            </p>
                        </div>            
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget widget_flickrRSS">
                            <h3>PHOTOSTREAMING</h3>
                            <a href="http://www.flickr.com/photos/sunny660201/6875279379/" title="DSC02227"><img src="http://farm8.staticflickr.com/7206/6875279379_c4a025d262_s.jpg" alt="DSC02227" /></a>
                            <a href="http://www.flickr.com/photos/54104175@N04/6875279427/" title="IMG_0825"><img src="http://farm8.staticflickr.com/7066/6875279427_63f7c56731_s.jpg" alt="IMG_0825" /></a>
                            <a href="http://www.flickr.com/photos/315521/6875279443/" title="DSC_0161"><img src="http://farm8.staticflickr.com/7203/6875279443_2f76d251d3_s.jpg" alt="DSC_0161" /></a>
                            <a href="http://www.flickr.com/photos/lwvtp/6875279463/" title="P1030647"><img src="http://farm8.staticflickr.com/7183/6875279463_0942d0fc57_s.jpg" alt="P1030647" /></a>
                            <a href="http://www.flickr.com/photos/71108778@N04/6875279477/" title="RIMG0093"><img src="http://farm8.staticflickr.com/7199/6875279477_872f15c182_s.jpg" alt="RIMG0093" /></a>
                            <a href="http://www.flickr.com/photos/shacho/6875279483/" title="IMG_0163"><img src="http://farm8.staticflickr.com/7180/6875279483_7cd6edf66f_s.jpg" alt="IMG_0163" /></a>
                        </div>              
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget recent-posts">
                            <h3>RECENT POSTS</h3>
                            <div class="last-news group">
                                <div class="box-post group">
                                    <div class="box-post-body group">
                                        <div class="news_title">
                                            <a href="#" title="A fresh and nice blog layout: do u like it?" class="title">A fresh and nice blog layout: do u like it?</a>
                                        </div>
                                        <p class="meta"><span class="date">December 13, 2011</span></p>
                                    </div>
                                </div>
                                <div class="box-post group">
                                    <div class="box-post-body group">
                                        <div class="news_title">
                                            <a href="#" title="50% off on our products for the month of August" class="title">50% off on our products for the month of August</a>
                                        </div>
                                        <p class="meta"><span class="date">December 7, 2011</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>     
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget-last widget widget_nav_menu">
                            <h3>MENU</h3>
                            <ul class="menu">
                                <li><a href="about.html">About Di&#8217;verso</a></li>
                                <li><a href="contact.html">Contact Di&#8217;verso</a></li>
                                <li><a href="shortcodes.html">Shortcodes</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="http://www.yourinspirationweb.com/en">Your Inspiration Web</a></li>
                            </ul>
                        </div>    
                        <!-- END WIDGET -->
                                  
                    </div>
                </div>
                <!-- END FOOTER -->
                           
                <!-- START COPYRIGHT -->
                <div id="copyright" class="group two-columns">
                    <div class="inner group">
                        <p class="left">Copyright <a href="#"><strong>Diverso</strong></a> 2010 - Powered by <a href="http://www.yourinspirationweb.com/en"><strong>Your Inspiration Web</strong></a></p>
                        <p class="right">
                            <a href="#" class="socials facebook" title="Facebook">facebook</a>
                            <a href="#" class="socials rss" title="Rss">rss</a>
                            <a href="#" class="socials flickr" title="Flickr">flickr</a>
                            <a href="#" class="socials youtube" title="Youtube">youtube</a>
                            <a href="#" class="socials twitter" title="Twitter">twitter</a>
                            <a href="#" class="socials linkedin" title="Linkedin">linkedin</a>
                            <a href="#" class="socials mail" title="Mail">mail</a>
                            <a href="#" class="socials skype" title="Skype">skype</a>
                        </p>
                    </div>
                    
                </div>
                <!-- END COPYRIGHT -->  
                   
            </div>
            <!-- END WRAPPER --> 
            	    
        </div>
        <!-- END SHADOW -->       
        
    </body>
</html>